<template>
	<view class="page content">
		<TopHead :title="'地址管理'"></TopHead>
		<view class="contBox">

			<view class="iteminput">
				<text class="">收货人</text>
				<input class="uni-input ipt" type="text" v-model="name" placeholder="请输入收货人姓名" />
			</view>
			<view class="iteminput">
				<text>手机号码</text>
				<input class="uni-input ipt" type="number" v-model="phone" placeholder="请输入手机号码" />
			</view>
			<view class="iteminput">
				<text class="">所在地区</text>
				<!-- <input class="uni-input ipt" type="text" v-model="newuser" placeholder="请选择" /> -->
				<picker class="uni-input ipt" mode="region" :value="selectedAddress" @change="onRegionChange">
					<view class="picker">
						{{region?region:'请选择省、市、区'}}
						<uni-icons class="right-icon" type="right" size="20"></uni-icons>
					</view>
					<!-- <view class="picker">请选择省、市、区</view> -->
				</picker>
			</view>
			<view class="iteminput iteminput-1" @click="getwz()">
				<text class="">地址</text>
				<!-- <input class="uni-input ipt" type="text" v-model="address" placeholder="点击获取位置" /> -->
				<view>{{address||'点击获取位置'}}</view>
				<uni-icons class="wz-icon" color="#e47917" type="location" size="22"></uni-icons>
			</view>
			<view class="iteminput">
				<text class="">门牌号</text>
				<input class="uni-input ipt" type="text" v-model="houseNumber" placeholder="请输入小区/单元/楼层等" />

			</view>
			<view class="iteminput switch">
				<text class="">设为默认</text>
				<switch checked color="#e47917" :checked="isChecked" @change="switchChange"
					style="transform:scale(0.7)" />
			</view>
			<view class="submitBtn" @click="bindSubmit">保存</view>
		</view>
	</view>
</template>

<script>
	import TopHead from '../../components/topHead/topHead.vue';
	export default {
		components: {
			TopHead
		},
		data() {
			return {

				list: [], // 列表
				page: 1,
				pageSize: 20, // 
				total: 0, // 总数
				hotList: [], // 热销
				headImage: '', // 头像
				selectedAddress: [], // 用于存储用户选择的省市区信息
				region: '', // 地址显示
				phone: '', // 电话
				name: '', // 名字
				address: '',
				isChecked: false, // 是否选中
				item: {}, //
				houseNumber: '', // 门牌号
				latitude: null, // 纬度
				longitude: null, // 经度
			}
		},
		onLoad(options) {
			// console.log(JSON.parse(options.item))
			if (options.item) {

				let item = JSON.parse(options.item)
				this.item = item
				this.name = item.name
				this.phone = item.phone
				this.region = item.region
				this.address = item.address
				this.latitude = item.latitude // 纬度
				this.longitude = item.longitude // 经度
				this.houseNumber = item.houseNumber // 门牌号
				if (item.defaultStatus == 1) {
					this.isChecked = true
				} else {
					this.isChecked = false
				}
				let selectedAddress = item.region
				selectedAddress = selectedAddress.split('-')
				this.selectedAddress = selectedAddress
				console.log(this.selectedAddress)
				if (this.selectedAddress) {
					this.region = selectedAddress[0] + '-' + selectedAddress[1] + '-' + selectedAddress[2]
				}
			}
			// this.init()
		},
		onShow() {
			this.page = 1
			this.total = 0
			this.list = []
			// this.initData()
		},
		onReachBottom() {
			// 触底分页
			console.log('触底')
			if (this.total > this.list.length) {
				this.page = parseInt(this.page) + 1
			}
		},
		methods: {
			// 提交
			bindSubmit() {
				let data = {
					latitude: this.latitude, // 纬度
					longitude: this.longitude, // 经度
					name: this.name,
					phone: this.phone,
					region: this.region,
					address: this.address,
					houseNumber: this.houseNumber, // 门牌号
					userId: uni.getStorageSync('id')
					// isChecked: this.isChecked
				}
				if (this.isChecked) {
					data.defaultStatus = 1
				} else {
					data.defaultStatus = 0
				}


				// 姓名
				if (!data.name) {
					uni.showToast({
						title: '请输入收货人姓名',
						icon: 'none'
					})
					return false
				}

				// 验证手机号
				let phoneReg = /^1[3456789]\d{9}$/; // /^1[3456789]\d{9}$
				if (!phoneReg.test(data.phone)) {
					uni.showToast({
						title: '手机号码格式不正确',
						icon: 'none'
					})
					return false
				}
				// 省市区
				if (!data.region) {
					uni.showToast({
						title: '请输入省市区',
						icon: 'none'
					})
					return false
				}
				// 地址
				if (!data.address) {
					uni.showToast({
						title: '请选择地址',
						icon: 'none'
					})
					return false
				}
				if (!data.houseNumber) {
					uni.showToast({
						title: '请输入小区/单元/楼层门牌',
						icon: 'none'
					})
					return false
				}
				console.log(data)
				let _this = this;
				if (this.item.id) {
					data.id = this.item.id
					_this.$http.fetchData({
						url: '/wechatApplet/customer/address/',
						method: 'PUT',
						data: data,
						success(res) {
							console.log(res)
							setTimeout(() => {
								uni.navigateBack({
									delta: 1
								});
							}, 1000)
						}
					})
				} else {
					_this.$http.fetchData({
						url: '/wechatApplet/customer/address/',
						method: 'POST',
						data: data,
						success(res) {
							console.log(res)
							setTimeout(() => {
								uni.navigateBack({
									delta: 1
								});
							}, 1000)
						}
					})
				}

			},
			init() {
				let selectedAddress = '重庆市-县-丰都县'
				selectedAddress = selectedAddress.split('-')
				this.selectedAddress = selectedAddress
				console.log(this.selectedAddress)
				if (this.selectedAddress) {
					this.region = selectedAddress[0] + '-' + selectedAddress[1] + '-' + selectedAddress[2]
				}

			},
			//  选择的省市区
			onRegionChange(event) {
				this.selectedAddress = event.detail.value;
				console.log('选择的省市区', this.selectedAddress);
				let selectedAddress = this.selectedAddress
				this.region = selectedAddress[0] + '-' + selectedAddress[1] + '-' + selectedAddress[2]
				console.log(this.region)
				// event.detail.value 是一个包含三个元素的数组，分别是省份、城市和区县
				// 例如：["广东省", "广州市", "天河区"]
			},
			// 是否默认
			switchChange(event) {
				console.log(event.detail.value)
				this.isChecked = event.detail.value

			},
			onChooseAvatar(e) {
				this.headImage = e.detail.avatarUrl
				console.log(e.detail.avatarUrl)
				let file = e.detail.avatarUrl
				let _that = this

				uni.uploadFile({
					url: _that.$http.baseUrl + 'updata', //附件上传的服务器接口地址，非真实的接口地址
					filePath: file, //要上传文件资源的路径,不同的组件
					name: 'file', //文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容,即附件信息的接收字段名称
					formData: { //HTTP 请求中其他额外的 form data	

					},
					success: (res) => { //回调方法
						console.log(JSON.parse(res.data));
						let data = JSON.parse(res.data);

						console.log(data.data.url)
						_that.headImage(data.data.url)
						// that.listFiles.push(data.url);


					}
				});
			},
			// 数据请求示例
			initData() {
				let _this = this;
				_this.$http.fetchData({
					url: '/api/biaoduan',
					method: 'GET',
					data: {},
					success(res) {
						// uni.showToast({
						// 	title: res.message,
						// 	icon: 'none'
						// });
						_this.list = [..._this.list, ...res.data]
						this.total = res.total
						let listData = res.data
						if (res.total == 1) {
							let id = listData[0].id
							let total = this.total
							let paramsStr = `?biaoduan_id=${id}&biaoduanTotal=${total}`
							uni.redirectTo({
								url: `/pages/procedureList/procedureList${paramsStr}`
							})
						}
					}
				})
			},
			// 查看详情
			announcementDetails(item) {
				console.log(item.id)
				let id = item.id
				let paramsStr = `?id=${id}`
				uni.navigateTo({
					url: `/pages/index/announcementDetails${paramsStr}`
				})
			},
			// 获取位置
			getwz() {
				console.log('获取位置')
				let _this = this
				uni.chooseLocation({
					success: (res) => {
						console.log('位置名称:' + res.name);
						console.log('详细地址:' + res.address);
						console.log('纬度:' + res.latitude);
						console.log('经度:' + res.longitude);
						// 在这里处理用户选择的位置信息，如更新页面上的地图显示等
						_this.address = res.address
						_this.latitude = res.latitude // 纬度
						_this.longitude = res.longitude // 经度
					}
				});
			},

		}
	}
</script>

<style scoped>
	.content {
		background: rgba(62, 122, 233, 0.05);
		padding-bottom: 60rpx;
		height: 100%;
		box-sizing: border-box;
		overflow-y: auto;
	}

	.contBox {
		padding: 30rpx;
		padding-top: 196rpx;
	}

	.title1 {
		font-size: 32rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Bold;
		font-weight: 700;
		text-align: center;
		color: #5d4529;
	}

	.time {
		font-size: 24rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Regular;
		font-weight: 400;
		text-align: center;
		color: #b8c5d3;
		margin-top: 30rpx;

	}

	.details {
		margin-top: 30rpx;
		font-size: 28rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Regular;
		font-weight: 400;
		color: #22172a;
	}

	.button-wrapper {
		background: none;
		padding-right: 0;
		margin-top: 60rpx;

	}

	.button-wrapper::after {
		border: none;
	}

	.user-headImg {
		width: 162rpx;
		height: 162rpx;
		background: rgba(0, 0, 0, 0.00);
		border-radius: 50%;
	}

	.iteminput {
		position: relative;
		padding-left: 206rpx;
		line-height: 131rpx;
		border-bottom: 2rpx solid rgba(94, 94, 94, 0.1);
	}

	.iteminput-1 {
		font-size: 26rpx;
		line-height: normal;
		padding: 48rpx 0;
		padding-left: 206rpx;
		padding-right: 30rpx;
	}
	.iteminput .wz-icon {
		position: absolute;
		right: 0rpx;
		top: 50%;
		margin-top: -20rpx;
	}

	.switch {
		text-align: right;
	}

	.iteminput text {
		line-height: 38rpx;
		position: absolute;
		left: 0;
		top: 50%;
		margin-top: -19rpx;
		font-size: 28rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Bold;
		font-weight: 700;
		color: #5d4529;
	}

	.iteminput .ipt {
		height: 131rpx;

	}

	.iteminput .ipt .picker {
		position: relative;
	}

	.iteminput .ipt .picker .right-icon {
		position: absolute;
		right: 0;
		top: 50%;
		margin-top: -66rpx;
	}

	.iteminput .ipt ::placeholder {
		font-size: 28rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Regular;
		font-weight: 400;
		color: #c2c2c2;

	}

	.iteminput .text1 {
		letter-spacing: 24rpx;
	}

	

	.submitBtn {
		font-size: 32rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Regular;
		font-weight: 400;
		color: #ffffff;
		line-height: 42rpx;
		text-align: center;
		margin: 0 auto;
		width: 590rpx;
		height: 112rpx;
		line-height: 112rpx;
		background: #e47917;
		border-radius: 10rpx;
		margin-top: 242rpx;
	}
</style>